<template>
  <div>
    <x-header :right-options="{showMore: true}" @on-click-more="showMenus = true">帖子详情</x-header>
    <flexbox orient="vertical">
      <flexbox-item>
        <div class="flex-demo">
          <div>
            <div class="namebox">
            <div class="namemsg" @click="tou(Tz_detail.User_id)">
            <img class="touxiang" :src="Tz_detail.User_tx" alt="">
            <div class="Tname">
            <span class="name">{{Tz_detail.User_name}}</span>
            <span class="time">{{Tz_detail.Tz_time}}</span>  
            </div>  
            </div>
            <!-- <button class="gz">关注</button> -->
            </div>

            <p class="Title">
              {{Tz_detail.Tz_text}}
            </p>
            <span class="Type">#{{Tz_detail.Tz_type}}</span>
            <div class="Timg">     <!-- 图片内容  -->     
                <img v-for="(img, index) in Tz_detail.Tz_img" :key="index" :src="img" width="30%;" :preview="Tz_detail.User_name" :preview-text="Tz_detail.Tz_text+'---'+Tz_detail.User_name">  
            </div>
            </div>

    <div class="Tclick">
    <div class="Tmsg" @click="Msgp='看帖是喜欢，评论才是真爱',touser=''">
    <img slot="icon" src="static/img/msg.png" width="25">
    <p>{{Pllist.length}}</p>
    </div>
    <div class="Tlike">
    <img v-if="Tz_detail.Tz_likeuser=='false'" slot="icon" src="static/img/like.png" width="25" @click="pClicked(Tz_detail)">
    <img v-if="Tz_detail.Tz_likeuser=='true'" slot="icon" src="static/img/like1.png" width="25" @click="pClicked(Tz_detail)">
    <p v-show="Tz_detail.Tz_like>0">{{Tz_detail.Tz_like}}</p>
    </div>
    <div class="Tunlike">
    <img v-if="Tz_detail.Tz_unlikeuser=='false'" slot="icon" src="static/img/unlike.png" width="25" @click="punClicked(Tz_detail)">
    <img v-if="Tz_detail.Tz_unlikeuser=='true'" slot="icon" src="static/img/unlike1.png" width="25" @click="punClicked(Tz_detail)">
    <p v-show="Tz_detail.Tz_like<0">{{Tz_detail.Tz_like}}</p>
    </div>
    </div>

            </div>
      </flexbox-item>
<divider>评论</divider>
</flexbox>
<div id="PL" v-for="(Pl,index) in Pllist" :key="index">
<div class="plbox">
<img class="spltop" src="static/img/spl.png" alt="" height="35" v-show="Pl.Pl_like>5">

<div class="topbox">
<div class="topuse" @click="tou(Pl.Pl_userid)">
<img class="topimg" slot="icon" :src='Pl.Pl_tx'>
<div class="nametime">
<span>{{Pl.Pl_username}}</span>  
<span style="color:#999;font-size:12px;">{{Pl.Pl_time}}</span>  
</div>  
</div>
<div class="topclick">
<div class="like">
<img v-if="Pl.Pl_likeuser=='false'" slot="icon" src="static/img/like.png" width="20" @click="Clicked(Pl)">
<img v-if="Pl.Pl_likeuser=='true'"  slot="icon" src="static/img/like1.png" width="20" @click="Clicked(Pl)">
<span v-show="Pl.Pl_like>0" style="color:#999;font-size:12px;" >{{Pl.Pl_like}}</span>  
</div>
<div class="unlike">
<img v-if="Pl.Pl_unlikeuser=='false'" slot="icon" src="static/img/unlike.png" width="20" @click="unClicked(Pl)">
<img v-if="Pl.Pl_unlikeuser=='true'"  slot="icon" src="static/img/unlike1.png" width="20" @click="unClicked(Pl)">
<span v-show="Pl.Pl_like<0" style="color:#999;font-size:12px;">{{Pl.Pl_like}}</span>  
</div>
</div>
</div>

<div class="plbox" @click="Msgp='回复 '+Pl.Pl_username+':',touser=Pl.Pl_username">
<p class="pltext">
  <span v-if="Pl.Pl_touser">回复&nbsp;<a href="" class="rline">{{Pl.Pl_touser}}</a>：&nbsp;</span>
  {{Pl.Pl_text}}</p>
</div>
</div>
<divider>-</divider>
</div>
<br><br><br>

<div class="schat">
  <div class="footer">
  <img src="static/img/图片.png" width="35" height="35" @click="isshow==false? isshow=true:isshow=false">
  <input class="Pinput" v-model="Msg" type="text" :placeholder="Msgp">
  
  
  <img src="static/img/表情.png" width="35" height="35" @click="isshow==false? isshow=true:isshow=false">
  <button :class="Msg==''? 'Psendd':'Psend'" :disabled="Msg==''? true:false"  @click="addpl(Msg)">发送</button> 
  </div>
  
<div class="bqbox">
<div class="bq" v-show="isshow" v-for="(item,index) in bq" :key="index">
<span v-for="(i,index) in item" :key="index" @click="Msg+=i;isshow=false">{{i}}</span>
</div> 
</div>  

</div>    
  </div>
</template>
<script>
import { TransferDom } from 'vux'
export default {
    inject:['reload'],
    directives: {
    TransferDom
    },
      data () {
    return {
      Tz_detail:{},
      Pllist:[],
      Msgp:'看帖是喜欢，评论才是真爱',
      Msg:'',
      touser:'',
      bq:[
          ['😂', '😭', '😹', '🙏', '😁', '😃', '😄', '😅',
          '😆', '😇', '😉', '😊', '😋', '😌', '😍', '😘',
          '😚', '😜', '😝', '😎', '😏', '😶', '😐' ,'😒',
          '😳', '😞', '😠', '😡', '😔', '😣', '😖' ,'😫',
          '😩', '😤', '😨', '😰', '😢', '😥', '😵', '👷',
          '😲', '😷', '💤', '🙌', '👏', '👋', '👊', '👌',
          '💪', '👍', '👆', '👇', '👈', '👉', '💩', '😈',
          '👿', '👹', '👺', '💀', '👻', '👽', '😺', '😸',
          '😻', '😼', '😽', '🙀', '😿', '😾', '👄', '💂',
          '👅', '👂', '👃', '👀', '👤', '👶', '👦', '👧',
          '👨', '👩', '👱', '👴', '👵', '👲', '👳', '👮',
          ],
            ],
      isshow:false,
    }
  },
    methods: {
      getTz_detail(){
          var that = this;
          var id = this.$route.params.id;
          var tid = this.$route.params.tid;
          that.$http.get("http://localhost:3000/post/postdetails/" + id +'/'+ tid)
          .then(
          (response)=>{
            for(let j = 0; j < response.data.msg.tzd.Tz_img.length;j++){
            response.data.msg.tzd.Tz_img[j] = 'http://localhost:3000' + response.data.msg.tzd.Tz_img[j];
              }
            that.Tz_detail=response.data.msg.tzd;
          },
          (error)=>{
          console.log("err");
        });

          that.$http.post("http://localhost:3000/pl/getpl",//获取评论
          {
          Tz_id:tid,
          User_id:id,
          },{emulateJSON: true})
          .then(
          (response)=>{
          if(response.data.msg.status=='ok'){
            that.Pllist = response.data.msg.pls;
          }else if(response.data.msg.status=='none'){
            console.log('没有评论');
          }
          this.$vux.loading.hide();
          },
          (error)=>{
              console.log("err");
          });
      },
      Clicked(x){//点赞 
      var id = this.$route.params.id;
      var tid = this.$route.params.tid;
      var pid = x._id;
      if(!sessionStorage.getItem('User_id')){
              this.$router.push('/Login');
          }else{
      if(x.Pl_unlikeuser=='false'){
        if(x.Pl_likeuser=='false'){
        x.Pl_like++,
        this.$http.post("http://localhost:3000/pl/pldz",
            {
            Tz_id:tid,
            Pl_id:pid,
            Pl_user:x.Pl_userid,
            User_id:id,
            like:x.Pl_likeuser[0],
            P_like:x.Pl_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Pl_likeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点赞成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Pl_likeuser=='true'){
        x.Pl_like--,
        this.$http.post("http://localhost:3000/pl/pldz",
            {
            Tz_id:tid,
            Pl_id:pid,
            Pl_user:x.Pl_userid,
            User_id:id,
            like:x.Pl_likeuser[0],
            P_like:x.Pl_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Pl_likeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消赞',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Pl_unlikeuser=='true'){
        this.$vux.toast.show({
        type: 'text',
        text: '你已点踩',
        position: 'middle',
        time: '1000'
        })
        }}
      },
      unClicked(x){//点踩
      if(!sessionStorage.getItem('User_id')){
        this.$vux.toast.show({
          type: 'text',
          text: '请登录！',
          position: 'middle',
          time: '1000'
        })
              this.$router.push('/Login');
          }else{
      var id = this.$route.params.id;
      var tid = this.$route.params.tid;
      var pid = x._id;
      if(x.Pl_likeuser=='false'){
        if(x.Pl_unlikeuser=='false'){
        x.Pl_like--,
        this.$http.post("http://localhost:3000/pl/pldc",
            {
            Tz_id:tid,
            Pl_id:pid,
            Pl_user:x.Pl_userid,
            User_id:id,
            like:x.Pl_unlikeuser[0],
            P_like:x.Pl_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Pl_unlikeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点踩成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Pl_unlikeuser=='true'){
        x.Pl_like++,
        this.$http.post("http://localhost:3000/pl/pldc",
            {
            Tz_id:tid,
            Pl_id:pid,
            Pl_user:x.Pl_userid,
            User_id:id,
            like:x.Pl_unlikeuser[0],
            P_like:x.Pl_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Pl_unlikeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消踩',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Pl_likeuser=='true'){
        this.$vux.toast.show({
        type: 'text',
        text: '你已点赞',
        position: 'middle',
        time: '1000'
        })
        }}
      },
      pClicked(x){//帖子点赞
      if(!sessionStorage.getItem('User_id')){
        this.$vux.toast.show({
          type: 'text',
          text: '请登录！',
          position: 'middle',
          time: '1000'
        })
              this.$router.push('/Login');
          }else{
      if(x.Tz_unlikeuser=='false'){
        if(x.Tz_likeuser[0]=='false'){
        x.Tz_like++,
        this.$http.post("http://localhost:3000/post/postdz",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            like:x.Tz_likeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_likeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点赞成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Tz_likeuser[0]=='true'){
        x.Tz_like--,
        this.$http.post("http://localhost:3000/post/postdz",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            like:x.Tz_likeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_likeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消赞',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Tz_unlikeuser=='true'){
        this.$vux.toast.show({
        type: 'text',
        text: '你已点踩',
        position: 'middle',
        time: '1000'
        })
        }}
      },
      punClicked(x){//帖子点踩
      if(!sessionStorage.getItem('User_id')){
        this.$vux.toast.show({
          type: 'text',
          text: '请登录！',
          position: 'middle',
          time: '1000'
        })
              this.$router.push('/Login');
          }else{
      if(x.Tz_likeuser=='false'){
      if(x.Tz_unlikeuser[0]=='false'){
        x.Tz_like--;
        this.$http.post("http://localhost:3000/post/postdc",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            unlike:x.Tz_unlikeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_unlikeuser,0,'true')
              this.$vux.toast.show({
              type: 'text',
              text: '点踩成功',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        if(x.Tz_unlikeuser[0]=='true'){
        x.Tz_like++;
        this.$http.post("http://localhost:3000/post/postdc",
            {
            Tz_id:x._id,
            Tz_user:x.User_id,
            User_id:this.$store.state.wd.wdid,
            unlike:x.Tz_unlikeuser[0],
            T_like:x.Tz_like,
            },{emulateJSON: true})
            .then(
            (response)=>{
              this.$set(x.Tz_unlikeuser,0,'false')
              this.$vux.toast.show({
              type: 'text',
              text: '取消踩',
              position: 'middle',
              time: '1000'
              })
            },
            (error)=>{
            console.log(error);
            }
            );
        }
        }else if(x.Tz_likeuser=='true'){
          this.$vux.toast.show({
          type: 'text',
          text: '你已点赞',
          position: 'middle',
          time: '1000'
        })
        }}
      },

    addpl(Msg){
      if (this.$store.state.wd.wdid==null) {
        this.$vux.toast.show({
          type: 'text',
          text: '请登录！',
          position: 'middle',
          time: '1000'
        })
      }
      else{
      this.$http.post("http://localhost:3000/pl/addpl",
            {
              Tz_id : this.Tz_detail._id,
              Pl_userid : this.$store.state.wd.wdid,
              Pl_username : this.$store.state.wd.wdname,
              Pl_tx : this.$store.state.wd.wdtx,
              Pl_text : Msg,
              Pl_touser : this.touser,
            },{emulateJSON: true})
            .then(
            (response)=>{
              if(response.data.msg.status=='ok'){
              this.reload()//重载
              this.$vux.toast.show({
              type: 'text',
              text: '评论成功',
              position: 'middle',
              time: '1000'
              })
              }else{
              this.$vux.toast.show({
              type: 'text',
              text: '评论失败',
              position: 'middle',
              time: '1000'
              })
              }
            },
            (error)=>{
            console.log(error);
            }
            );}
    },
    addlook(){
      var id = this.$route.params.id;
      var tid = this.$route.params.tid;
      this.$http.post("http://localhost:3000/users/addlook",
            {
              id : id,
              tid : tid
            },{emulateJSON: true})
            .then(
            (response)=>{
            },
            (error)=>{
            console.log(error);
            }
            );
    },
    tou(x){
        this.$router.push('/Nd/' + x);
    },
  },
  mounted(){
    this.getTz_detail();
    this.$previewRefresh();//图片数据更新
    this.addlook();
    this.$vux.loading.show();
    $('html,body').animate({scrollTop: '0px'}, 0);//置顶
  },
}
</script>

<style lang="less" scoped>
@import '~vux/src/styles/1px.less';
.rline{
text-decoration:none;  /*超链接无下划线*/
color: #008CBA;
}
.flex-demo {//帖子css
  width: 100%;
  background-color: #f8f6f6;
  border-radius: 4px;
  background-clip: padding-box;

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
}
.namebox{
  margin-top: 10px;
  display: flex;
  justify-content:space-between;
  align-items:center;
}
.namemsg{
  margin-left: 20px;
  display: flex;
  flex-direction: row;
  justify-content:flex-start;
  width: 70%;
}
.Tname{
  display: flex;
  flex-direction: column;
}
.touxiang{
    background-color: aliceblue;
    border-radius: 50%;
    height: 50px;
    width: 50px;
    margin-right: 20px;
}
.name{
  margin-bottom: 5px;
  width: 200px;
  color: rgb(59, 59, 59);
  font-size: 14px;
  white-space:nowrap; 
  text-overflow:ellipsis;
  overflow:hidden;
}
.time{
  color: rgb(88, 88, 88);
  font-size: 12px;
}
.gz{
  margin-right: 20px;
  white-space:nowrap; 
    background-color: white; 
    color: black; 
    border: 2px solid #008CBA;
    border-radius: 15px;
    font-size: 12px;
    padding: 5px 15px;

}
.Tclick{
  display: flex;
  align-items:center;
  justify-content:space-around;
  margin-bottom: 10px;
  margin-top: 10px;
}
.Tmsg{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.Tunlike{
  display: flex;
  align-items:center;
  justify-content:space-around;
}


.Title{
margin-left: 20px;
margin-right: 20px;
margin-bottom: 10px;
margin-top: 10px;
}
.Timg{
  margin-left: 20px;
  margin-top: 10px;
  width: 80%;
}

.topbox{//评论css
  display: flex;
  display: -webkit-flex;
  justify-content:space-between;
}
.topimg{ 
  width: 50px;
  height: 50px;
  border-radius: 50px;
  margin-right: 20px;
}
.topuse{
  display: flex;
  justify-content: flex-start;
}
.nametime{
  display: flex;
  flex-direction: column;
  justify-content: left;
}
.topclick{
  width: 30%;
  display: flex;
  align-items:center;
  justify-content:space-around;
}
.like{
  display: flex;
  align-items:center;
}
.unlike{
  display: flex;
  align-items:center;
}
.plimg{
  font-size: 10px;
}//

.schat{//底部输入
background-color:rgb(220, 220, 220);
width: 100%;
position:fixed;
bottom:0px;
left:0px;

display: flex;
flex-direction: column;
}
.footer{
display: flex;
justify-content: space-around;
align-items:center;
padding-left: 5px;
padding-right: 5px;
height: 50px;
}
.Pinput{
  width: 65%;
  height: 35px;
  border: none;
  outline:none;
  font-size: 18px;
  text-indent: 10px;
  border-radius: 15px;
}
.Pinput:focus{
  border: none;
  outline:none
}
.Psend{
  width: 50px;
  height: 30px;
  background-color: green;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
}
.Psendd{
  width: 50px;
  height: 30px;
  background-color: green;
  border: none;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  border-radius: 5px;
  opacity: 0.6;
  cursor: not-allowed;
}
.bqbox{
  display: flex;
  justify-content: center;
}
.bq{
  font-size: 30px;
  width: 80%;
  height: 120px;
  display: flex;
  flex-wrap: wrap;
  overflow-y: scroll;
}
.Type{
    margin-left: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-size: 12px;
    color: #008CBA;
    border: 2px solid #008CBA;
    border-radius: 5px;
}
.plbox{
  position:relative;
  border-radius: 5px;
  padding: 15px;
}
.pltext{
  font-size:14px;
  word-wrap: break-word;
  word-break: break-all;
}
.spltop{
  position:absolute;
  top:0;
  left:0;
}
</style>